<template>
  <div ref="listWrap" class="list-wrap" @scroll="scrollListener">

    <div class="list" ref="List">

        <slot  v-for="item in showList" :songInfo="item" :key="item.id"></slot>
        
    </div>
    
    
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref, computed, onMounted, nextTick } from "vue";
import playListItem from "../Home/Play-List-Item.vue";
export default defineComponent({
  setup(props) {
    const list = ref(props.list); //长列表数据
    const itemHeight = ref(props.itemHeight); //item高度
    const showNum = ref(props.showNum); //展示的数据
    const start = ref(props.start); //滚动过程中的开始索引
    const end = ref(props.end); //滚动过程中的结束索引

    const listWrap = ref(null); //获取列表节点
    const List = ref(null)
    const scrollBar = ref(null)

    onMounted(() => {

        
        listWrap.value.style.height = itemHeight.value * showNum.value + "px";

       
    });



    const showList = computed(() => {
      //获取展示的列表
      return list.value.slice(start.value, end.value);
    });

    const scrollListener = (() => {
           //获取滚动高度
            let scrollTop = listWrap.value.scrollTop;
            // console.log("Scrolltop",scrollTop);
            
            //开始的数组索引
            start.value = Math.floor(scrollTop / itemHeight.value);
            //结束索引
            end.value = start.value + showNum.value;

            // console.log("start.value: " + start.value);
            // console.log("end.value"+end.value);
            
            
            //绝对定位对相对定位的偏移量
            // console.log("List",List);
            
         
            List.value.style.transform =  `translateY(${start.value * itemHeight.value}px)`

            

    })

    return {
      list,
      itemHeight,
      showNum,
      start,
      end,
      showList,
      listWrap,
      scrollListener,
      List,
      scrollBar
    };
  },
  components: { playListItem },
  props: {
    list: {
      type: Array,
      default: [],
    },
    itemHeight: {
      type: Number,
      default: 30,
    },
    showNum: {
      type: Number,
      default: 10,
    },
    start: {
      type: Number,
      default: 0,
    },
    end: {
      type: Number,
      default: 10,
    },
  },
});
</script>
 
<style lang = "scss" scoped>
@import "../../assets/css/virtual-list.scss";
</style>